<template>
  <div v-if="alignLine.enable && alignLine.show" class="ident-line-wp">
    <div
        class="ident-line x-line"
        :style="{ width: `${canvas.width}px`, top: `${alignLine.top}px` }"
    ></div>
    <div
        class="ident-line x-line"
        :style="{ width: `${canvas.width}px`, top: `${alignLine.horizontal}px` }"
    ></div>
    <div
        class="ident-line x-line"
        :style="{ width: `${canvas.width}px`, top: `${alignLine.bottom}px` }"
    ></div>
    <div
        class="ident-line y-line"
        :style="{ height: `${canvas.height}px`, left: `${alignLine.left}px` }"
    ></div>
    <div
        class="ident-line y-line"
        :style="{ height: `${canvas.height}px`, left: `${alignLine.vertical}px` }"
    ></div>
    <div
        class="ident-line y-line"
        :style="{ height: `${canvas.height}px`, left: `${alignLine.right}px` }"
    ></div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "align-line",
  setup() {
    const store = useStore()
    const alignLine = computed(()=>store.state.design.alignLine)
    const canvas = computed(()=>store.state.design.canvas)
    return {
      alignLine,
      canvas,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./../../../../../style/theme/index.less";


.ident-line {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
}

.x-line {
  border-top: 1px dashed #00c1de;
}

.y-line {
  border-left: 1px dashed #00c1de;
}

</style>